<template>
  <div id="app">
    <el-container>
      <!-- 头部导航栏 -->
      <!--      background-color: #333;-->
      <el-header style=" color: white; padding: 10px;">
        <el-menu mode="horizontal" background-color="#333" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item @click="HomePage()">首页</el-menu-item>
          <el-menu-item @click="relo()">个人中心</el-menu-item>
        </el-menu>
      </el-header>

      <!-- 用户信息区域 -->
      <el-main style="height:180px">
        <div class="user-info">
          <!-- 点击头像触发 showAvatarDialog 方法 -->
          <div class="user-avatar" @click="showAvatarDialog">
            <img :src='avatarUrl' alt="用户头像" style="width: 100%;height: 100%">
          </div>
          <div class="user-details">
            <h2>{{ this.userPageInfo.username }}</h2>
            <p  >注册时间:{{ this.userPageInfo.createTime }}</p>
          </div>
        </div>

        <!-- 弹窗组件 -->

      </el-main>

      <!-- 主内容区域 -->
      <el-container>
        <el-aside width="150px" class="aside">
          <div >
            <el-table :data="tableData" >
              <el-table-column prop="date" class="tb-column" ></el-table-column>
            </el-table>
          </div>
          <!-- 侧边栏内容 -->
        </el-aside>
        <el-main class="content-main">
          <component style="float: left;width: 100%" :is="currentComponent"
                     :dataFromUserPage="userPageInfo"></component>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <div title="选择头像" v-if="this.dialogVisible" class="alert-box">
    <h1>请点击选择想要的头像</h1>
    <div class="avatar-list">
      <!-- 遍历头像列表，点击头像触发 selectAvatar 方法 -->
      <img v-for="avatar in avatarList" :key="avatar.id" :src="getAvatarUrl(avatar.url)" @click="selectAvatar(avatar)">
    </div>
  </div>
</template>

<script>
import Settings from './userService/Settings.vue'
// import { ref } from 'vue';
import {doPost} from "../http/HttpRequest.js";
import {defineComponent} from 'vue'
import router from "@/router/router";

export default defineComponent({
  props: ['user'],
  data() {
    return {
      firstLoad: true, // 标志位，表示是否是第一次加载
      un: {
        username: this.user,
      },
      defaultAvatar: require('../picture/profile/icon-test.png'),  // 默认显示的头像路径
      dialogVisible: false,  // 弹窗可见性
      selectedAvatar: null,  // 选择的头像路径
      avatarList: [],  // 头像列表，先设置为空数组
      userPageInfo: {
        username: this.user,
        password: '',
        phone: '',
        email: '',
        permissions: '',
        createTime: '',
      },
      currentComponent: Settings, // 默认显示设置组件
      tableData: [
        // { date: '概览' },
        {date: '设置'},
        // ... 其他菜单项
      ],
      // username : '',
    };
  },
  created() {
    // 动态加载头像列表
    this.avatarList = [
      {id: 1, url: require('../picture/profile/icon-test.png')},  // 注意路径的写法，使用动态加载方式
      {id: 2, url: require('../picture/profile/icon-test_1.png')},
      {id: 3, url: require('../picture/profile/icon-test_2.png')},
      {id: 3, url: require('../picture/profile/icon-test_3.png')},
      {id: 3, url: require('../picture/profile/icon-test_4.png')},
      {id: 3, url: require('../picture/profile/icon-test_5.png')},
      {id: 3, url: require('../picture/profile/icon-test_6.png')},
      {id: 3, url: require('../picture/profile/icon-test_7.png')},
      {id: 3, url: require('../picture/profile/icon-test_8.png')},
      {id: 3, url: require('../picture/profile/icon-test_9.png')},
      {id: 3, url: require('../picture/profile/icon-test_10.png')},
      {id: 3, url: require('../picture/profile/icon-test_11.png')},
      {id: 3, url: require('../picture/profile/icon-test_12.png')},
      {id: 3, url: require('../picture/profile/icon-test_13.png')},
      {id: 3, url: require('../picture/profile/icon-test_14.png')},
      {id: 3, url: require('../picture/profile/icon-test_15.png')},
      {id: 3, url: require('../picture/profile/icon-test_16.png')},
      {id: 3, url: require('../picture/profile/icon-test_17.png')},
      {id: 3, url: require('../picture/profile/icon-test_18.png')},
      {id: 3, url: require('../picture/profile/icon-test_19.png')},
      // 添加更多头像对象
    ];
    // 设置默认头像
    this.selectedAvatar = this.defaultAvatar;
  },
  computed: {
    avatarUrl() {
      return this.selectedAvatar || this.defaultAvatar;
    }
  },
  mounted() {
    this.fetchUserInfo(); // 页面加载时自动请求用户信息
    if (!sessionStorage.getItem('pageRefreshed')) {
      sessionStorage.setItem('pageRefreshed', true);
      window.location.reload(); // 刷新当前页面
    } else {
      sessionStorage.removeItem('pageRefreshed'); // 清除标记，确保下次可以再次刷新
    }
  },
  methods: {
    fetchUserInfo() {
      doPost("/api/v1/user/info", this.un).then(resp => {
        // eslint-disable-next-line
        if (resp.data.code === "0000") {

          this.userPageInfo.password = resp.data.data.password;
          this.userPageInfo.phone = resp.data.data.phone;
          this.userPageInfo.email = resp.data.data.email;
          this.userPageInfo.permissions = resp.data.data.permissions;
          this.userPageInfo.createTime = resp.data.data.createTime;
        } else {
          // 登录失败，显示错误消息或其他逻辑
          console.error('失败', resp.data.message); // 假设服务器返回了错误信息
        }
      })
    },
    HomePage(){
      //重定向到另一个工程的页面
      // window.location.href = '/home';
      const username = this.userPageInfo.username;
      router.push({ name: 'home', params: { username } });
    },
    relo(){
      window.location.reload();
    },
    showAvatarDialog() {
      this.dialogVisible = true;  // 显示头像选择弹窗
    },
    selectAvatar(avatar) {
      this.selectedAvatar = avatar.url;  // 选择头像并更新主页面显示的头像
      this.dialogVisible = false;  // 关闭弹窗
    },
    getAvatarUrl(path) {
      // 使用动态导入或其他方式获取完整图片路径
      return new URL(path, import.meta.url).href;
    }
  },
  components: {},
})
</script>

<style scoped>
.user-info-card {
  margin-top: 10px;
}

.user-info {
  position: relative; /* 父容器设置为相对定位 */
  display: flex;
  align-items: flex-start; /* 设置信息框中内容顶部对齐 */
}

.user-avatar {
  margin-right: 40px; /* 调整头像与信息框的间距 */
}

.user-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.user-details {
  position: absolute; /* 绝对定位 */
  top: 10px; /* 从顶部开始对齐 */
  left: 100px; /* 从右侧对齐，若需要从左侧对齐可设置left: 0; */
  flex: 1;
  font-family: Lucida Bright;
}

.user-details h2 {
  margin-top: 0;
}

.user-details p {
  margin: 0;
}

.aside {
  height: 450px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 水平偏移量，垂直偏移量，模糊半径，阴影颜色 */
  //border: 2px solid #000000;
}

.tb-column{
  border: 2px solid #000000;
  width: 80%;
  height: 40px;
  font-weight: bold;
}

.content-main {
  height: 450px;
//border: 2px solid #000000;
}

.alert-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
  display: flex;
  flex-direction: column; /* 这将使内容垂直排列 */
  align-items: center; /* 这将使内容水平居中 */
}

.profile {
  height: 10px;
  width: 5px;
}
</style>
